<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,initial-scale=1.0"/>
    <title>中汇财经</title>
    <link rel="stylesheet" type="text/css" href="css/styleUI.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="page" class="uf uf-ver">
    <div id="header" class="uf uf-ac uf-pja">
        <a href="liveVideo.html" class="nav active">视频直播</a>
        <a href="liveText.html" class="nav">文字直播</a>
        <a href="liveCopy.html" class="nav">视频回顾</a>
    </div>

    <div id="container" class="uf-f u-scroll">
        <div class="videoDiv topB">
            <video onerror="stalled()" onstalled="stalled()" src="http://play.zhibo.yngw518.com/live/weixin.m3u8" onplay="videoBy(this,1)"
                   onpause="videoBy(this,0)" onclick="videoPlay(this,event)"
                   poster="image/static/liveVideoPoster1.jpg"
                   preload="auto"
                   x-webkit-airplay="true"
                   webkit-playsinline="true"
                   playsinline="true"
                   x5-video-player-type="h5"
                   x5-video-player-fullscreen="true"></video>
            <div class="videoBy playCenter"></div>
            <div class="videoBy bottom">
                <div class="videoInfo uf uf-ac uf-pj">
                    <div class="tt">赢在收盘</div>
                    <div class="lessSize" style="padding-left:15%;">主讲：李勇</div>
                    <div id="videoStatus" class="lessSize winColor">直播中</div>
                </div>
            </div>
        </div>

        <div class="liveSug">
            <div class="ub line">
                <div class="title">本期主题：</div>
                <div class="ub-f">十四个字十四个字十四个字十四</div>
            </div>
            <div class="uf uf-ac uf-pj line">
                <span class="title">下节预告</span>
                <span>14:30-15:30</span>
                <span class="warnFont">日进斗金</span>
                <span class="lessSize">主讲：熊华</span>
            </div>
        </div>
        <div class="courseTable">
            <div class="title">直播时间表</div>
            <div class="uf uf-pj">
                <div class="ub ub-pc ub-ac course active">牛股<br>早知道</div>
                <div class="ub ub-pc ub-ac course">盘中<br>点金</div>
                <div class="ub ub-pc ub-ac course">赢在<br>收盘</div>
                <div class="ub ub-pc ub-ac course">日进<br>斗金</div>
            </div>
            <div class="courseDiv">
                <div class="courseView show">
                    <div class="uf uf-ac uf-pj line"><span>星期一至星期五</span><span>09:50开始</span><span>熊&nbsp;&nbsp;&nbsp;&nbsp;华</span>
                    </div>
                </div>
                <div class="courseView">
                    <div class="uf uf-ac uf-pj line"><span>星期一至星期五</span><span>10:55开始</span><span>佘定军</span>
                    </div>
                </div>
                <div class="courseView">
                    <div class="uf uf-ac uf-pj line"><span>星期一至星期五</span><span>14:20开始</span><span>李&nbsp;&nbsp;&nbsp;&nbsp;勇</span>
                    </div>
                </div>
                <div class="courseView">
                    <div class="uf uf-ac uf-pj line"><span>星期一至星期五</span><span>19:30开始</span><span>熊&nbsp;&nbsp;&nbsp;&nbsp;华</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="masking closeFixed"></div>
    <div class="fixedLogin">
        <div class="closeIcon closeFixed"></div>
        <div class="area">
            <div class="topInfo">您好，需要登录才能观看直播哟</div>
            <input id="username" required class="input" name="username" type="text" placeholder="请输入您的账号">
            <input id="password" required class="input" name="password" type="password" placeholder="请您的输入密码">

            <button id="loginSubmit" class="btn">登录</button>
            <div class="info">如果未获得账号密码，请拨打<a href="tel:025962155">025-962155</a>开通账号</div>
        </div>
    </div>

    <div id="footer" class="uf">
        <a href="index.html" class="uf-f uf uf-ae uf-pc">判大势</a>
        <a href="plot.html" class="uf-f uf uf-ae uf-pc">牛布局</a>
        <a href="liveVideo.html" class="uf-f uf uf-ae uf-pc active">观直播</a>
        <a href="about.html" class="uf-f uf uf-ae uf-pc">寻合作</a>
    </div>

</div>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/jqToast.js"></script>
<script type="text/javascript">

    $(document).ready(function () {
        //点击弹窗的登录按钮事件
        $("#loginSubmit").click(function () {
            videoLogin();
        });
    });

    //播放时隐藏videoBy,显示控制器
    function videoBy(ele, isShow) {
        var $ele = $(ele);
        var $videoBy = $ele.parent().find('.videoBy');
        if (isShow == 0) {
            //暂停事件
            $videoBy.show();
            $ele.removeAttr("controls");
        } else {
            //播放事件
            $videoBy.hide();
            $ele.attr("controls", "controls");
//            $("#videoStatus").html("直播中").addClass("winColor").removeClass("warnColor");
        }
    }

    //视频点击事件的回调，播放或暂停视频
    function videoPlay(ele, e) {
        e.preventDefault();
        e.stopPropagation();
        var video = ele;
        if (!video.paused) {
            video.pause();
        } else {
            //判断是否登录
            if (localStorage.getItem("liveVideo.login")) {
                video.play();
            } else {
                fixedPlan(1);
            }
        }
    }

    //当浏览器尝试获取媒体数据，但数据不可用时(直播节结束了)
    function stalled() {
        alert("直播已结束！");
        $("#videoStatus").html("已结束").removeClass("winColor").addClass("warnColor");
    }

    //点击课程
    $(".course").on('click', function () {
        var $this = $(this);
        if ($this.hasClass('active'))return;
        var $plane = $(this).parents('.courseTable');
        //活跃状态
        var modelLis = $plane.find(".course");
        if (modelLis && modelLis.length) {
            $.each(modelLis, function (index, item) {
                $(item).removeClass("active");
            });
            $this.addClass("active");
        }
        //课程表
        var viewLis = $plane.find(".courseView");
        if (viewLis && viewLis.length) {
            $.each(viewLis, function (index, item) {
                $(item).removeClass("show");
            });
            var index = $this.index();
            $(viewLis[index]).addClass('show');
        }
    });

    //点击关闭弹窗
    $(".closeFixed").click(function () {
        fixedPlan(0);
    });

    function fixedPlan(l) {
        if (l == 1) {
            $(".masking").show();
            $(".fixedLogin").show();
        } else {
            $(".masking").hide();
            $(".fixedLogin").hide();
        }
    }

    //登录
    function videoLogin() {
        var username = $("#username").val();
        var password = $("#password").val();
//        console.log(username, password);
        if (!username) {
            jqOpenToast("请输入账号！");
            return;
        }
        if (!password) {
            jqOpenToast("请输入密码！");
            return;
        }
        $.ajax({
            url: "http://pcsoft.yngw518.com/index.php?g=Home&m=Public&a=liveLogin",
            type: "POST",
            data: {
                name: username,
                password: password
            },
            success: function (ret) {
                if (ret == 200) {
                    //登陆成功
                    jqOpenToast("登录成功！");
                    localStorage.setItem("liveVideo.login", 1);
                    setTimeout(fixedPlan, 2000);
                } else {
                    jqOpenToast(ret);
                }
            },
            error: function (err) {
                jqOpenToast("未知的错误发生了");
            }
        });
    }
</script>
</body>
</html>